<template>
  <div class="user-tab">
    <van-tabs
      id="apps"
      line-width="0"
      :class="{ oneTab: rollLists.length == 1, towTab: rollLists.length == 2 }"
      class="cont-tab"
      offset-top="50px"
      swipe-threshold="3"
      v-model="activePeo"
      v-if="rollLists.length"
      swipeable
      @change="tabChange">
      <van-tab v-for="(item, index) in userLists" :key="item.userId" :name="item.userId" swipe-threshold="3">
        <template #title>
          <div
            class="peoHint"
            :class="{ tab_start: index === 0, tab_end: index === userLists.length - 1 }"
            v-if="userLists.length > 1">
            <span :class="[{ color_red: item.isEmployee == '1' }]">{{ item.userName }}</span>
            <i class="iconfont icon-dian" :style="FinishCondition(item.status)"></i>
          </div>
        </template>
        <div class="tab_info">
          <div class="info-left">
            <div class="user-head">
              <van-image
                class="user-icon"
                :src="item.headUrl"
                round
                width="39px"
                height="39px"
                fit="cover"
                v-if="item && item.headUrl"></van-image>
              <van-image
                class="user-icon"
                :src="item.gender === '女' ? circleUrlW : circleUrlM"
                round
                width="39px"
                height="39px"
                fit="cover"
                v-else></van-image>
            </div>
            <div class="user-name">
              {{ item.userName }}
            </div>
          </div>
          <div class="info-right">
            <span class="tit">部门：</span>
            <span>{{ item.orgName }}</span>
          </div>
        </div>
        <!-- <slot name="tab-con"></slot> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'UserTab',
  components: {},
  emits: ['deal-data'],
  props: {
    rollList: {
      type: Array,
      default: () => [],
    },
    userList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      rollLists: [],
      userLists: [],
      activePeo: '',
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
    }
  },
  watch: {
    rollList: {
      handler(news) {
        this.rollLists = news
      },
      deep: true,
      immediate: true,
    },
    userList: {
      handler(news) {
        this.userLists = news
        if (news.length && !this.activePeo) {
          this.activePeo = news[0].userId
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    FinishCondition(status) {
      if (status == '1') {
        return 'color:#EE0A24'
      } else if (status == '2' || status == '3') {
        return 'color:#67C23A'
      }
    },
    tabChange() {
      const idx = this.userLists.findIndex(item => {
        return item.userId === this.activePeo
      })
      const data = {
        item: this.userLists[idx],
        index: idx,
      }
      // console.log('data :>> ', data)
      this.$emit('deal-data', data)
    },
    changeUser(id) {
      if (this.activePeo !== id) {
        this.activePeo = id
      }
    },
    changeUserUrge(id) {
      const idx = this.userLists.findIndex(item => {
        return item.userId === id
      })
      this.userLists[idx].isUrge = '0'
    },
  },
}
</script>
<style lang="scss" scoped>
.user-tab {
  position: sticky;
  overflow-x: scroll;
  border-radius: 5px;
  margin: 6px 16px;
  /deep/.van-tab--active {
    background: transparent;
    position: relative;
    z-index: 111;
    color: #004db6 !important;
    .van-tab__text {
      font-size: 14px !important;
      font-weight: bold;
      width: 100%;
      height: 100%;
    }
    .peoHint {
      background: #ffffff;
      border-radius: 5px 10px 0 0;
    }
  }
  /deep/.van-tabs__wrap {
    height: 46px;
    padding: 0;
    .van-tabs__nav {
      background: #ebf3ff;
      color: #656565;
      // padding-right: 4px;
      // padding-left: 4px;
      .van-tab {
        padding: 0;
      }
    }
    .van-tabs__line {
      background: none !important;
    }
    .van-tab__text {
      font-size: 13px;
    }
  }
  .peoHint {
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-dian {
      width: 6px;
      height: 6px;
      position: absolute;
      right: -3px;
      top: -3px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .tab_start {
    border-radius: 5px 10px 0 0;
  }
  .end_start {
    border-radius: 10px 0 0 0;
  }
  .tab_info {
    position: relative;
    background-color: #ffffff;
    padding: 13px 14px;
    box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .info-left {
      display: flex;
      align-items: center;
      .user-head {
        height: 39px;
        width: 39px;
      }
      .user-name {
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
  .oneTab {
    /deep/.van-tabs__wrap {
      display: none !important;
    }
  }
}
</style>
